<template>
	<view class="app-classify-reservation" :style="[AppSkinVar,viewStyle]">
		<reservationType v-model:value="appointmentType" :hasValue="info.appointmentType" />
		<view class="e-p-l-20 e-p-r-20">
			<e-line color="#DFE3E6"></e-line>
		</view>
		<reservationAddress v-show="appointmentType === '2'" v-model:info="address" type="1" v-if="address" />
		<view class="e-p-l-20 e-p-r-20">
			<e-line color="#DFE3E6"></e-line>
		</view>
		<reservationWeek ref="weekRef" :type="appointmentType" :data="info.staffsList||[]" />
		<view class="e-p-l-20 e-p-r-20">
			<e-line color="#DFE3E6"></e-line>
		</view>
		<view class="  e-p-l-20 e-p-r-20">
			<view class="e-flex e-p-t-30 e-p-b-30">
				<text>{{$t('classify.备注')}}</text>
				<input class="e-flex-1 e-m-l-40" type="text" v-model="remarks" :placeholder="$t('classify.预约备注提示')">
			</view>
			<e-line color="#DFE3E6"></e-line>
		</view>
		<view class="  e-p-l-20 e-p-r-20" v-if="currentCard">
			<view class="e-flex e-p-t-30 e-p-b-30"
				@tap="jumpCardList">
				<text class="e-flex-1">{{$t('classify.可用次卡')}}</text>
				<view class="e-flex">
					<text class="e-m-r-6">{{currentCard.exchangeSize}}{{$t('classify.次卡')}} /</text><text
						class="c-primary">{{ $t('classify.剩余') }} {{currentCard.residueSize}}
						{{$t('classify.次')}}</text>
					<app-image src="arrow_right.png" :size="['36rpx']" />
				</view>
			</view>
			<e-line color="#DFE3E6"></e-line>
		</view>
		<view class="app-classify-reservation__money e-flex e-flex-between" v-if="appointmentType === '2'">
			<text class="e-font-26 c-secondary">{{$t('classify.技师上门费用')}}</text>
			<view>
				<text class="e-p-r-20 e-font-26">{{$t('classify.上门费')}}</text>
				<text class="c-red fw-600">{{$unitEn}}{{info.appointmentMoney||0}}</text>
			</view>
		</view>
		<view class="app-classify-reservation__btn e-flex bg-white">
			<view class="e-flex-xy-center bg-primary e-flex-1" @tap="jump">
				<text class="c-white">{{$t('classify.立即预约')}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed,onUnmounted} from 'vue'
	import reservationType from './child/reservationType.vue'
	import reservationAddress from './child/address.vue'
	import reservationWeek from './child/week.vue'
	import { useCurrentInstance } from '@/common/hooks'
	import {
		getAddressList,
		getUserTimeCardList,
		getGoodsAppointmentInfo
	} from '@/common/request/api'
	import type { GoodsAppointmentInfo, AddressItem, UserTimeCardItem } from '@/common/request/api'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useInit
	} from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	import type { WeekInstance } from './type'


	const props = defineProps<{
		qty : string
		skuId : string
	}>()

	const ctx = useCurrentInstance()

	const { AppSkin } = storeToRefs(useInit())

	const viewStyle = computed(() => ({
		'--bg-primary': AppSkin.value.primary.replace('1)', '0.05)')
	}))

	const info = ref<GoodsAppointmentInfo>({
		appointmentMoney: 0,
		appointmentType: '',
		price: 0
	})
	const appointmentType = ref('')

	const address = ref<AddressItem | undefined>(undefined)

	const cardList = ref<UserTimeCardItem[]>([])
	const cardId = ref(-1)
	const currentCard = computed(() => cardList.value.find(item => item.id === cardId.value))


	const remarks = ref('')

	const weekRef = ref<WeekInstance>()
	const jump = () => {
		const value = weekRef.value?.getValue?.()
		if (value) {
			const params = {
				...value,
				...props,
				appointmentType: appointmentType.value,
				remarks: remarks.value
			}
			if (cardId.value > -1) {
				params['cardId'] = cardId.value
			}
			if (appointmentType.value === '2') {
				if (!address.value?.id) {
					ctx.$toastApp(ctx.$t('classify.请选择上门地址'))
					return
				}
				params['receivedId'] = address.value.id

			}
			ctx.$goRedirectTo('/pages/systemPay/nearby/reservation/previewOrder', params)
		}

	}
	
	const updateCurrentCard = (e : number) => {
			if (e) {
				if (e !== cardId.value) {
					cardId.value = e
				}
			}
		}
	const jumpCardList = () => {
		ctx.$goTo('/pages/classify/reservation/cardList', {skuId: props.skuId,id:currentCard.value.id },{
			updateCurrentCard
		})

	}


	onLoad(() => {
		getGoodsAppointmentInfo(props.skuId).then(res => {
			info.value = res.data
			appointmentType.value = info.value.appointmentType.split(',')[0]
		})
		getAddressList().then(res => {
			address.value = res.data.find(item => item.isDefaul === 1) || undefined
		})
		getUserTimeCardList({ skuId: props.skuId, status: 0 }).then(res => {
			if (res.data.length) {
				cardList.value = res.data
				cardId.value = res.data[0].id
			}
		})
	})

	
</script>

<style lang="scss">
	page {
		background-color: $base-color-white;
	}
</style>
<style lang="scss" scoped>
	@include appBem_b(classify-reservation) {
		padding-bottom: 232rpx;

		@include appBem_e(money) {
			position: fixed;
			height: 80rpx;
			background: #FFF7EB;
			padding: 0 20rpx;
			bottom: 140rpx;
			left: 0;
			right: 0;
		}

		@include appBem_e(btn) {
			position: fixed;
			height: 140rpx;
			padding: 0 40rpx;
			bottom: 0;
			left: 0;
			right: 0;

			>view {
				height: 90rpx;
				border-radius: 45rpx;
			}
		}
	}
</style>